<template>
  <div class="order-container">
    <title-bar :columns="columns"></title-bar>
    <!--暂无订单  -->
    <div class="orderItem" v-if="!orderFormList || orderFormList.length == 0">
      暂无数据
    </div>
    <!--全部订单  -->
    <div v-for="(orderAll, index) in orderFormList" :key="index" v-else>
      <order-item :order-all="orderAll" :sku-length="skuLength"></order-item>
    </div>
    <!--分页  -->
    <div class="mt30" v-if="totalPage > 0">
      <w-paging :total="totalPage" @on-page="onPage"></w-paging>
    </div>
  </div>
</template>
<script>
import titleBar from './components/TitleBar.vue'
import orderItem from './components/OrderItem.vue'
// 订单接口
import { apiOrderAll } from 'js/api'
export default {
  data() {
    return {
      columns: [
        { 'col': '货品', 'width': '37.5%' },
        { 'col': '单价(元)', 'width': '12.5%' },
        { 'col': '数量', 'width': '12.5%' },
        { 'col': '总金额', 'width': '12.5%' },
        { 'col': '订单状态', 'width': '12.5%' },
        { 'col': '交易操作', 'width': '12.5%' }
      ],
      // 全部订单列表
      orderFormList: {},
      skuLength: 0,
      orderInfo: {
        // 流水号
        trade_no: '',
        // 订单状态
        order_status: '',
        // 待发货订单查询时的标识
        waitDelivorderType: '',
        // 订单ID
        id: '',
        // 下单开始时间
        beginTime: '',
        // 下单结束时间
        endTime: '',
        // 商品订单类型，0：商城商品；1：积分商品；
        order_goods_type: 0,
        // 当前页
        currentPage: 1,
        // 一页显示数
        showCount: 15
      },
      totalPage: 0
    }
  },
  components: {
    titleBar,
    orderItem
  },
  created() {
    // 获取路由中的订单状态类型
    let typeOrder = this.$route.query.type
    console.log(typeOrder)
    // this.$store.commit('getUserInfo')
    this.getOrderAll()
  },
  methods: {
    // 获取全部订单
    getOrderAll() {
      // const token = this.$store.getters.token
      const token = '9107733ad23d47a6b1c57b0502244844'
      apiOrderAll(token, this.orderInfo).then((data) => {
        this.orderFormList = data.orderFormList
        this.orderFormList.forEach(list => {
          list.goodsInfoList.forEach(info => {
            this.skuLength += info.goodsGsp.length
          })
        })
        console.log('**************', this.skuLength)
        this.totalPage = data.totalPageCount
      })
    },
    // 点击下一页
    onPage(index) {
      this.orderInfo.currentPage = index
      this.getOrderAll()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../scss/_var.scss';
.order-container {
  margin: 30px 0 0 0;
} 
.mt30 {
  margin-top: 30px;
}
.orderItem {
  text-align: center;
  background-color: $color-white;
  padding: 30px;
}
</style> 